还不会svg路径动画？这有个动画神库帮你一键搞定

2023-08-18 03:25| 来源: 网络整理| 查看: 265

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

介绍

本期给大家介绍一个十分实用且强大的动画库——mo.js，虽然是英文文档，但是酒香不怕巷子深，我们还是被他的强大能力所震撼到。它是一个用于 Web 的动态图形工具集，有简单的声明性 API、跨设备兼容性和超过 1500 个单元测试。你可以在 DOME 或 SVG DOME 周围移动你创建的图形或创建唯一的mo.js对象。

我们今天就用它试水一个牛油果svg路径动画，因为经常很多展示型页面都会有大量的路径动画的需求，控制起来又很麻烦。特地安排了这个案例，给大家减轻负担走上人生巅峰~

随着时间流逝，我们一点点的就把牛油果给画出来并填充上色，接下来，我们就去实现它，来了解mo.js的强大之处。

正文 1.基本结构 html,body,#app { width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #E1F3D0; } #svg { height: 80%; }

结构就是这样。我们等下先找个svg图像，放到主容器app下。另外，我们这边引入了两个库，顾名思义。第一个是mo.js主库，里面包含了mo.js的动画功能。而mojs-playerjs可以理解为播放器的控制台，根据mojs对象视为一个视频来使用，可以调节速度，是否循环，播放位置等操作。

2.挑选svg图像

svg的资源网站很多，这里主要用阿里的iconfont。找到素材把svg源码下载下来，然后放到html中。

微信截图_20211006130653.png

微信截图_20211006130737.png

这样svg就展示出来了，接下来我们将通过路径动画将其表现出来。

3.路径动画

做路径动画之前，我们先要收集路径下的信息：

/*app.js*/ let whiteColor = "white"; let path = document.querySelectorAll('path'); let fillData = []; let strokeColorData = []; let strokeWidthData = []; Array.from(path).forEach(item => { let fillColor = item.getAttribute("fill") fillData.push({ "none": fillColor|| whiteColor }) strokeWidthData.push(fillColor ? 0.5: 1) strokeColorData.push(fillColor|| whiteColor) });

我们获取svg下所有的path，在path上获取到填充色。同时，我们存储填充色过渡数据fillData，线段宽度数据strokeWidthData，线段颜色数据strokeColorData。

接下来，我们用mo.js来让svg根据path数据走走走，走起来~

/*app.js*/ const HtmlStagger = mojs.stagger(mojs.Html); let avocado = new HtmlStagger({ el: path, fill: fillData, stroke: strokeColorData, strokeWidth: strokeWidthData, strokeDasharray: '3000', strokeDashoffset: { '3000': '0' }, duration: 8000, delay: 'stagger(500)', });

我们实例化一个HtmlStagger对象，就是这个牛油果图形。将刚才获取到的数据对应上放上去。然后设置strokeDasharray和strokeDashoffset过渡，其实就是设置svg的划线，详见stroke-dasharray。我们可以用这两个属性用css3动画也可以实现svg路径动画，但是复杂动画控制起来炒鸡麻烦。所以，我们才会出现这些动画库。

当然，如果想动起来可以用：play方法。

avocado.play();

这样，我们的路径动画就这么简单就完成了，内心是不是无数发问：就这？就这？就这？？

微信截图_20211006132940.png

4.动画播放器

我们虽然可以播放了，但是我们在开发当中，也会想看其动画变化清空，为其做一些细节调整。所以，我们就引入了mo.js的动画播放器。在基础机构中我们已经引入了，现在我们先去掉play方法，用播放器去控制他。

// avocado.play() new MojsPlayer({ add: avocado, isRepeat: false, isPlaying: false, isSaveState: false })

微信截图_20211006133412.png

我们这里就完美实现了想要的牛油果路径动画的播放控制，详见mojs-player。

add：添加图形 isRepeat：是否重复 isPlaying：是否播放 isSaveState：是否应该在页面重新加载时保留状态

我们写到这里，要写的已经完成了，炒鸡方便有木有！！在线演示

拓展

mo.js做svg只是其能力的冰山一角，他还可以做大量的图形动画和文字动画，还有曲线编辑器和时间线等工具去辅助，可以轻松完成业务场景绝大部分的动画。一起去探索一下吧~

【本文地址】

公司简介

联系我们